<template>
  <div>
    <div class="title">
      <div class="one">
        <h1>{{ mtail?.name }}</h1>
        <div class="sell"><p class="yuan">{{ mtail?.sellPrice }}</p><span>元起</span></div>
      </div>
      <div class="two">
        <div class="addr">{{ mtail?.addr }}</div>
        <div class="distance">{{ mtail?.distance }}</div>
      </div>
      <div class="label">
        <div class="labels" v-for="(lab, labindex) in mtail.labels" :key="labindex" >
        <p class="tui" :style="{color: lab.color,borderColor:lab.color}">{{ lab.name }}</p>
      </div>
      </div>
      <div class="showtimes">{{ mtail?.showTimes }}</div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  mtail: {
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.one{
  display: flex;
  justify-content: space-between;
  h1{
    font-size: 16rem;
    color: #000;
    margin: 5rem 0 5rem 5rem;
  }
  .sell{
    display: flex;
    font-size: 12rem;
    color: #f03d37;
    margin: 5rem 5rem 5rem 0;
    .yuan{
      font-size: 16rem;
      margin-right: 3rem;
    }
  }
}
.two{
  display: flex;
  justify-content: space-between;
  .add{
    font-size: 13rem;
    color: #666;
    margin: 5rem 0 5rem 5rem;
  }
  .distance{
    font-size: 13rem;
    color: #666;
    margin: 5rem 5rem 5rem 0;
  }
}
.label{
  display: flex;
  margin-bottom: 5rem;
  .labels{
  .tui{
    margin-left: 5rem;
    padding: 1rem 3rem;
    border-radius: 5rem;
    border: 1rem solid;
  }
}
}
.showtimes{
  color: #999;
  padding-bottom: 6rem;
  border-bottom: 1rem solid #f4f4f4;
  margin-bottom: 5rem;
}
</style>
